<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MagiCycles Depot</title>
        <style>  
            body {
                margin: auto;
                padding: 0;
                width: 998px;
            }
            #msg {
                color:#FF0000;
                margin:5px;
            }
            #upload {
                position: absolute;
                z-index: 98;
            }
            #fileinput {
                display: block;
                position: absolute;
                cursor: pointer;
                opacity: 0;
                z-index: 99;
                width:1px;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready( function() {
                var msg = $('#msg');

                var fileinput = $("#fileinput");
                var uploadlink = $("#uploadlink");

                relocation_fileinput = function() {
                    fileinput.width(uploadlink.width());
                    fileinput.height(uploadlink.height());
                    position = uploadlink.offset();
                    fileinput.css({
                        left: position.left + "px",
                        top: position.top +"px"
                    });
                }
                uploadlink.hover( function () {
                    relocation_fileinput();
                });

                check_file_ext = function(filename) {
                    var accepted_exts = "jpg,png,gif,jpeg,tiff,ico,bmp,jpe,kml,xml,gpx";
                    filename = filename.split('.');
                    var ext = filename[filename.length-1].toLowerCase();
                    return accepted_exts.indexOf(ext) >= 0;
                };
                
                fileinput.change( function() {
                    if (!check_file_ext(fileinput.val())) {
                        alert("unsupported file type!");
                        return false;
                    }
                    upload_file();
                });
                
                upload_file = function(){
                    //var signature = ''+(Math.round(Math.random()*10000));  //get signature from Magicycles

                    var signature = "";

                    $.getJSON("http://localhost:8080/apis/rest/?method=get_upload_signature&callback=?",
                          function(data){
                              if (data.status=="ok") {
                                  signature = data.signature;
                                  _upload(signature);
                              } else{
                                  alert(data.message);
                              }
                          }
                    );

                    _upload = function(signature) {
                        $("#signature").val(signature);

                        getuploadurl = "http://localhost:9090/getuploadurl/?signature=" + signature;

                        jQuery.getScript(getuploadurl, function() {  //server response result,uploadurl,message
                            if (result=="ok"){
                                msg.html(uploadurl);  //uploadurl from server reponse
                                var upload_form = $("#upload_form")[0];
                                upload_form.action = uploadurl;
                                upload_form.submit();

                                setTimeout( function() {  //wait and get result url
                                    getphotourl(signature);
                                },1);
                            } else {
                                alert(message);
                            }
                        });
                    }
                    return false;
                }
                getphotourl = function(signature) {
                    jQuery.getScript("http://localhost:9090/getfileurl/"+signature+"?timeout=20", function() {
                        if (result=="ok"){
                            msg.html(fileurl);
                            $("#photo").attr("src",fileurl);  //fileurl from server reponse
                        } else {
                            alert("can't get photo");
                        }
                    });
                };
            });
        </script>
    </head>
    <body>
        <iframe name="framesubmit" id="framesubmit"  style="display:none" width="0" height="0"></iframe>
        <h1>MagiCycles Depot Upload Test</h1>
        <div id="msg"></div>
        <img id="photo" width="100" height="100" />
        
        <form id="upload_form" target="framesubmit" method="post" enctype="multipart/form-data">
            <input type="hidden" id="signature" name="signature" value=""/>
            <a id="uploadlink" href="javascript:;">upload</a>
            <input id="fileinput" type="file" name="file"/>
        </form>
        
    </body>
</html>
